<!-- 新增分组 -->
<template>
  <div class="detail-index-content">
    <Modal
      v-model="modalValue"
      :title="titleName"
      footer-hide
      width="960px"
      @on-cancel="cancel"
    >
      <Form ref="formData" label-position="top" :rules="ruleValidate" :model="formData">
        <Row :gutter="30">
          <Col span="12">
            <FormItem label="分组名称" prop="groupName">
              <div style="width: 100%">
                <Input
                  v-model="formData.groupName"
                  placeholder="请输入"
                ></Input>
              </div>
            </FormItem>
          </Col>

          <Col span="12">
            <FormItem label="排序" prop="orderNo">
              <div style="width: 100%">
                <InputNumber
                  v-model="formData.orderNo"
                  placeholder="请输入排序"
                ></InputNumber>
              </div>
            </FormItem>
          </Col>

          <Col span="12" v-if="types == '2' && titleName != '编辑角色'">
            <FormItem label="选择分组" >
              <Select v-model="formData.permissionGroupId">
                <Option
                  v-for="item in cityList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" justify="space-between">
          <Col>
            <Button
              type="primary"
              :loading="isLoading"
              @click="handleSubmit('formData')"
              >保存</Button
            >
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script type="text/javascript">
import {
  createGroup, // 创建权限组
  updateGroup, // 修改权限组
} from "@/api/system.js";

import iconList from "@/libs/icon-list";

export default {
  name: "changeBeforeAfter",
  components: {},
  props: {
    echoData: {
      type: Object,
      default: () => {},
    },
    isHide: {
      type: Boolean,
      default: false,
    },
    titleName: {
      type: String,
      default: "新增角色分组",
    },
    types: {
      // 1 分组 2 角色组
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      formData: {
        permissionGroupId: "",
        companyId:"",
        groupName: "",
        orderNo: 0,
        groupType: "Auth",
      },
      ruleValidate: {},
      modalValue: false,
      isLoading: false,
      iconList,
    };
  },
  methods: {
    cancel() {
      this.$emit("update:updateIsHide", false);
    },
    async createGroupAction() {
      this.isLoading = true;
      try {
        let data = await createGroup(this.formData);
        this.isLoading = false;
        this.$Message.success("添加成功！");
        this.$emit("actionSuccess");
      } catch (error) {
        this.isLoading = false;
      }
    },
    async updateGroupAction() {
      this.isLoading = true;
      try {
        let data = await updateGroup(this.formData);
        this.isLoading = false;
        this.$Message.success("编辑成功！");
        this.$emit("actionSuccess");
      } catch (error) {
        this.isLoading = false;
      }
    },
    handleSubmit(name) {
      console.log(name, "name");
      this.$refs[name].validate((valid) => {
        console.log(valid, "name", this.$props.echoData);
        if (valid) {
          if (this.$props.echoData.id) {
            this.updateGroupAction();
            return;
          }
          this.createGroupAction();
        }
      });
    },
  },
  created() {
    this.formData.parentId = this.$props.echoData.parentId;
    this.formData.ownType = this.$props.echoData.ownType;
    this.modalValue = this.$props.isHide;
  },
};
</script>

<style lang="less" scoped>
.ivu-radio-group {
  width: 100%;
}
.ivu-input-number {
  width: 100%;
}
</style>
